<template>
  <div id="app">
    <div :class="['demo', 'pui-theme', demoRef.theme && 'pui-theme__dark']">
      <div class="top">
        <div class="left">
          <div class="demo-item">
            <div class="title text_dark">主题</div>
            <div class="content">
              <pui-switch
                activeLabel="Dark"
                inactiveLabel="Light"
                activeColor="#409EFF"
                inactiveColor="#909399"
                v-model="demoRef.theme"
                @onChange="themeChange"
              >
              </pui-switch>
              <pui-svg name="text-color"></pui-svg>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">按钮</div>
            <div class="content">
              <pui-button>描边按钮</pui-button>
              <pui-button type="primary" @click="changeToolbarInputData">描边按钮</pui-button>
              <pui-button type="danger" size="small">small按钮</pui-button>
              <pui-button icon="check" @click="showTopDrawerClickHandle"></pui-button>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">开关</div>
            <div class="content">
              <div>
                <pui-switch v-model="demoRef.switchActive1" isLoading :loading="demoRef.switchLoading" @onChange="switchChange">
                </pui-switch>
                <pui-switch v-model="demoRef.switchActive2"></pui-switch>
              </div>
              <div class="m-t-10">
                <pui-switch v-model="demoRef.switchActive3" disabled></pui-switch>
                <pui-switch v-model="demoRef.switchActive4" disabled></pui-switch>
              </div>
              <div class="m-t-10">
                <pui-switch v-model="demoRef.switchActive5" autofocus isLoading :loading="demoRef.switchLoading" @onChange="switchChange">
                </pui-switch>
                <pui-switch v-model="demoRef.switchActive6" autofocus></pui-switch>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">下拉列表</div>
            <div class="content">
              <pui-selector placeholder="默认路径" :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
              <pui-selector class="m-t-10" block :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">自动补全</div>
            <div class="content">
              <pui-search
                :dataList="demoRef.optionsList"
                v-model="demoRef.inputText1"
                type="search"
                iconPosition="right"
                clearAble
                @onIconClick="onIconClick"
              >
              </pui-search>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">输入框</div>
            <div class="content">
              <pui-input v-model="demoRef.inputText2" type="input" clearAble full width="200px" size="mini"></pui-input>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">数字输入框</div>
            <div class="content">
              <pui-input-number v-model="demoRef.inputText3" :precision="2" :step="0.1" :min="0" :max="100"></pui-input-number>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="demo-item">
            <div class="title text_dark">复选框</div>
            <div class="content">
              <div>
                <pui-checkbox v-model="demoRef.check1" size></pui-checkbox>
                <pui-checkbox v-model="demoRef.check2" size label="checkbox2"></pui-checkbox>
                <pui-checkbox v-model="demoRef.check3" disabled size label="disabled"></pui-checkbox>
              </div>
              <div class="m-t-20">
                <pui-checkbox v-model="demoRef.check1" label="checkbox1" size border></pui-checkbox>
                <pui-checkbox v-model="demoRef.check2" size label="checkbox2" border></pui-checkbox>
                <pui-checkbox v-model="demoRef.check3" disabled size label="disabled" border></pui-checkbox>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">单选框</div>
            <div class="content">
              <pui-radio-group v-model="demoRef.radio1" :list="demoRef.radioList"></pui-radio-group>
              <pui-radio-group class="m-t-20" v-model="demoRef.radio1" :list="demoRef.radioList" disabled column></pui-radio-group>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">标签</div>
            <div class="content">
              <div>
                <pui-tag plain>Tag1</pui-tag>
                <pui-tag type="primary" plain>Tag1</pui-tag>
                <pui-tag type="primary">Tag1</pui-tag>
                <pui-tag type="primary" plain><pui-icon name="plus" /> Add Tag</pui-tag>
              </div>
              <div class="m-t-20">
                <pui-tag plain circle>1</pui-tag>
                <pui-tag type="primary" plain circle>2</pui-tag>
                <pui-tag type="primary" circle>9+</pui-tag>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">标签栏</div>
            <div class="content">
              <pui-tabs
                :tabList="demoRef.tabList1"
                @onRemove="removeTab"
                @onAdd="addTab"
                @onClickHandle="tabClickHandle"
                add
                remove
                @onRightClickHandle="tabRightClickHandle"
              >
              </pui-tabs>
              <pui-tabs round class="m-t-20" :tabList="demoRef.tabList2" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="demo-item">
            <div class="title text_dark">对话框</div>
            <div class="content">
              <pui-button @click="showDialog('fade')">fade</pui-button>
              <pui-button @click="showDialog2('fade')">fade-footer</pui-button>
              <pui-button @click="showDialog('slide-fade')">slide-fade</pui-button>
              <pui-button @click="showDialog('bounce')">bounce</pui-button>
              <pui-dialog title="对话框" v-model="demoRef.dialogVisible" :animate="demoRef.animate" width="800px" :isHeader="true">
                <template #header>
                  <div class="pui-dialog_title">哦吼</div>
                </template>
                <template #content>
                  <div>
                    {{ demoRef.animate }}
                  </div>
                </template>
              </pui-dialog>
              <pui-dialog title="对话框-footer" v-model="demoRef.dialogVisible2" :animate="demoRef.animate" :isFooter="true">
                <template #content>
                  <div>
                    {{ demoRef.animate }}
                  </div>
                </template>
                <template #footer>
                  <pui-button @click="demoRef.dialogVisible2 = false">取消</pui-button>
                </template>
              </pui-dialog>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">树形控件</div>
            <div class="content">
              <pui-tree :dataList="demoRef.optionsList" isPopper @onNodeClick="itemClickHandle">
                <pui-button>树形控件</pui-button>
              </pui-tree>
              <pui-tree class="m-t-10" border :show="true" :dataList="demoRef.optionsList" @onNodeClick="itemClickHandle"></pui-tree>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">级联选择器</div>
            <div class="content">
              <pui-cascader :dataList="demoRef.optionsList">
                <pui-button>级联选择器</pui-button>
              </pui-cascader>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">抽屉组件</div>
            <div class="content" style="height: 150px; width: 300px; position: relative">
              <div
                class="l"
                style="
                  height: 150px;
                  width: 300px;
                  position: relative;
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;
                "
              >
                <pui-drawer position="left" header zIndex="2" :width="270" show>
                  <template #header>
                    <span style="font-size: 16px">left</span>
                  </template>
                  left
                </pui-drawer>
                <pui-drawer position="right" title="right" zIndex="1" :width="270">right</pui-drawer>
              </div>
              <pui-drawer position="top" title="top" zIndex="4" :height="120" :show="demoRef.showTopDrawer">top</pui-drawer>
              <pui-drawer position="bottom" title="bottom" zIndex="3" :height="120">bottom</pui-drawer>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title text_dark m-t-20">分组工具栏</div>
        <pui-toolbar :toolbarList="demoRef.toolbarList" @onInputHandle="onInputHandle"></pui-toolbar>
      </div>
      <div class="bottom">
        <div class="title text_dark m-t-20">分析器子窗口</div>
        <pui-container>
          <pui-main>
            <pui-window
              defaultWidth="300"
              defaultHeight="250"
              title="test1"
              :backgroundColor="demoRef.currentColor"
              @closeWindow="closeTest()"
              :rightItemList="demoRef.rightItemList"
            >
            </pui-window>
            <pui-window defaultWidth="300" defaultHeight="250" title="test2" @closeWindow="closeTest()"></pui-window>
            <pui-color-picker v-model="demoRef.currentColor" @changeColor="changeColor"></pui-color-picker>
          </pui-main>
        </pui-container>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';

let toolbarInputData = reactive({
  sizeX: 100,
  sizeY: 200,
  sizeZ: 50,
  gridSpacing: 0.01,
  pmlWidth: 1,
  envN: 1,
});

const demoRef = reactive({
  theme: false,
  switchActive1: true,
  switchActive2: false,
  switchActive3: true,
  switchActive4: false,
  switchActive5: true,
  switchActive6: false,
  switchLoading: false,
  currentColor: '#EB7044',
  showTopDrawer: false,
  rightItemList: [
    {
      name: '复制',
      fn: () => {
        console.log('复制');
      },
    },
  ],
  optionsList: [
    {
      label: 'phot-system-1',
      value: '1',
      tip: './photlab/phot-system-1/phot-system-1.phtg',
      children: [
        {
          label: '测试1-1',
          value: '1-1',
          bg: true,
          children: [
            {
              label: '测试1-1-1',
              value: '1-1-1',
              fn: () => {
                console.log('测试1-1-1');
              },
            },
            {
              label: '测试1-1-2',
              value: '1-1-2',
            },
            {
              label: '测试1-1-3',
              value: '1-1-3',
            },
          ],
        },
        {
          label: '测试1-2',
          value: '1-2',
        },
        {
          label: '测试1-3',
          value: '1-3',
        },
      ],
    },
    {
      label: '测试2',
      value: '2',
    },
    {
      label: '测试3',
      value: '3',
    },
  ],
  selectData1: '',
  selectData2: '',
  selectData3: {
    value: '',
    label: '',
  },
  inputText1: '123',
  inputText2: '123',
  inputText3: '123',
  check1: false,
  check2: true,
  check3: true,
  radio1: '2',
  radioList: [
    {
      value: '1',
      label: 'radio1',
    },
    {
      value: '2',
      label: 'radio2',
      disabled: true,
    },
    {
      value: '3',
      label: 'radio3',
    },
  ],
  tabList1: [
    {
      name: 'tab1tab1tab1tab1tab1tab1tab1tab1',
      // , svgSrc: require('@/assets/file-icon.svg')
    },
    { name: 'tab2' },
    // {name: 'tab3'},
    // {name: 'tab4'},
    // {name: 'tab5'},
    // {name: 'tab6'},
  ],
  tabList2: [{ name: '图标' }, { name: '文字' }, { name: '数字' }],
  selected: [],
  innerHeight: 0, // 获取窗口高度
  tableHeight: 300, // 设置第一个div的高度为窗口高度的一半
  dialogVisible: false,
  dialogVisible2: false,
  animate: 'fade',
  range: 40,
  toolbarList: [
    {
      title: '剪切板',
      type: 'clipboard',
      options: [
        {
          display: 'row',
          showText: true,
          size: 'large',
          list: [
            {
              display: 'column',
              label: '粘贴',
              icon: 'stickup',
              id: '5',
            },
          ],
        },
        {
          display: 'column',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'row',
              label: '复制',
              icon: 'copy',
              id: '6-1',
            },
            {
              display: 'row',
              label: '剪切',
              icon: 'cut',
              id: '6-2',
            },
            {
              display: 'row',
              label: '删除',
              icon: 'clean',
              id: '6-3',
            },
          ],
        },
      ],
    },
    {
      // text-mode
      title: '文本编辑',
      type: 'text-mode',
      options: [
        {
          display: 'column',
          size: 'large',
          list: [
            {
              display: 'column',
              label: '添加文本',
              icon: 'add-text',
              id: '7',
              fn: () => {
                console.log('添加文本');
              },
            },
          ],
        },
        {
          display: 'row',
          size: 'small',
          list: [
            {
              display: 'row',
              label: '字体',
              icon: '',
              id: '8-1',
              fn: (e: any) => {
                console.log('字体:', e);
              },
            },
            {
              display: 'row',
              label: '大小',
              icon: '',
              id: '8-2',
              fn: (e: any) => {
                console.log('大小:', e);
              },
            },
          ],
        },
        {
          display: 'row',
          size: 'small',
          list: [
            {
              display: 'row',
              label: '',
              icon: 'text-left',
              id: '9-1',
              fn: () => {
                console.log('text-left');
              },
            },
            {
              display: 'row',
              label: '',
              icon: 'text-center',
              id: '9-2',
              fn: () => {
                console.log('text-center');
              },
            },
            {
              display: 'row',
              label: '',
              icon: 'text-right',
              id: '9-3',
              fn: () => {
                console.log('text-right');
              },
            },
            {
              display: 'row',
              label: '',
              icon: 'text-background-color',
              id: '9-4',
              fn: () => {
                console.log('text-background-color');
              },
            },
            {
              display: 'row',
              label: '',
              icon: 'text-color',
              id: '9-5',
              fn: () => {
                console.log('text-color');
              },
            },
          ],
        },
      ],
    },
    {
      title: '文件',
      type: 'file',
      options: [
        {
          display: 'row',
          showText: true,
          size: 'large',
          list: [
            {
              display: 'column',
              label: '新建',
              icon: 'new-file',
              id: '1',
              fn: () => {
                console.log('新建');
              },
              dataList: [
                {
                  label: '测试1',
                  value: '1',
                  fn: () => {
                    console.log('测试1');
                  },
                  icon: 'save',
                },
                {
                  label: '测试2',
                  value: '2',
                  icon: 'new-file',
                },
              ],
            },
          ],
        },
        {
          display: 'row',
          showText: true,
          size: 'large',
          list: [
            {
              display: 'column',
              label: '保存',
              icon: 'save',
              id: '2',
              dataList: [
                {
                  label: '测试1',
                  value: '1',
                  icon: 'save',
                },
                {
                  label: '测试2',
                  value: '2',
                },
              ],
            },
          ],
        },
        {
          display: 'column',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'row',
              label: '打开',
              icon: 'folder-open',
              id: '3-1',
            },
            {
              display: 'row',
              label: '关闭',
              icon: 'folder-close',
              id: '3-2',
            },
            {
              display: 'row',
              label: '退出',
              icon: 'quit',
              id: '3-3',
            },
          ],
        },
        {
          display: 'column',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'row',
              label: '打印',
              icon: 'print',
              id: '4-1',
            },
            {
              display: 'row',
              label: '帮助',
              icon: 'help',
              id: '4-2',
            },
            {
              display: 'row',
              label: '设置',
              icon: 'setting',
              id: '4-3',
            },
          ],
        },
      ],
    },
    {
      title: '工具栏3',
      type: 'input',
      options: [
        {
          display: 'column',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'row',
              label: '空间步长（um）',
              labelWidth: '100px',
              icon: '',
              id: '',
              prop: 'gridSpacing',
              value: toolbarInputData.gridSpacing,
              type: 'number',
              precision: 2,
              step: 0.1,
              min: 0,
            },
            {
              display: 'row',
              label: '环境折射率',
              labelWidth: '100px',
              icon: '',
              id: '',
              prop: 'envN',
              value: 1,
              type: 'number',
              precision: 2,
              step: 0.1,
              min: 0,
            },
            {
              display: 'row',
              label: 'PML便界宽度',
              labelWidth: '100px',
              icon: '',
              id: '',
              prop: 'pmlWidth',
              value: 1,
              type: 'number',
              precision: 2,
              step: 0.1,
              min: 0,
            },
          ],
        },
        {
          display: 'column',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'row',
              type: 'btn',
              size: 'small',
              btnList: [
                {
                  label: '提交',
                  btnType: 'primary',
                  onClick: (e: any) => {
                    console.log(1);
                  },
                },
              ],
            },
            {
              display: 'row',
              type: 'switch',
              size: 'small',
              btnList: [
                {
                  activeLabel: '开1',
                  inactiveLabel: '关1',
                  size: '',
                  prop: 'switch1',
                  value: false,
                  onChange: (e: any) => {
                    console.log(e);
                  },
                },
              ],
            },
          ],
        },
        {
          display: 'row',
          showText: true,
          size: 'large',
          type: 'tool',
          list: [
            {
              display: 'column',
              label: '新建',
              icon: 'new-file',
              id: '1',
              fn: () => {
                console.log('新建');
              },
            },
          ],
        },
      ],
    },
    {
      title: '工具栏4',
      options: [
        {
          display: 'row',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'column',
              label: '运行',
              icon: 'play',
              id: '14-1',
              dataList: [
                {
                  label: '矩形波导',
                  value: 'waveguide',
                  border: true,
                  fn: () => {},
                  // 可加入图标
                  icon: 'play',
                },
                {
                  label: 'S波导',
                  value: 'sbend',
                  fn: () => {},
                  // 可加入图标
                  icon: 'play',
                },
                {
                  label: 'Y型波导',
                  value: 'ysplitter',
                  fn: () => {},
                  icon: 'play',
                },
              ],
            },
          ],
        },
        {
          display: 'row',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'column',
              label: '暂停',
              icon: 'pause',
              id: '14-2',
              dataList: [],
            },
          ],
        },
        {
          display: 'row',
          showText: true,
          size: 'small',
          list: [
            {
              display: 'column',
              label: '终止',
              icon: 'stop',
              id: '14-3',
              dataList: [],
            },
          ],
        },
      ],
    },
  ] as any,
}) as any;

const onInputHandle = (e: any) => {
  console.log(e);
  // toolbarInputData[e.prop] = e.value;
};

const removeTab = (e: Boolean) => {
  console.log(demoRef.tabList1);
};

const addTab = () => {
  demoRef.tabList1.push({
    name: 'tab' + (demoRef.tabList1.length + 1),
  });
};

const tabClickHandle = (e: any) => {
  console.log(e);
};
const tabRightClickHandle = (e: any) => {
  console.log(e);
};
const themeChange = () => {
  demoRef.theme = !demoRef.theme;
};
const switchChange = (e: any) => {
  demoRef.switchLoading = true;
  setTimeout(() => {
    demoRef.switchLoading = false;
    demoRef.switchActive1 = !demoRef.switchActive1;
    demoRef.switchActive5 = !demoRef.switchActive5;
  }, 2000);
};
const showDialog = (animate: string) => {
  demoRef.animate = animate;
  demoRef.dialogVisible = true;
};
const showDialog2 = (animate: string) => {
  demoRef.animate = animate;
  demoRef.dialogVisible2 = true;
};
const showTopDrawerClickHandle = () => {
  console.log(12312);
  demoRef.showTopDrawer = true;
};
const closeTest = () => {
  console.log('关闭窗口');
};
const changeColor = (val: any) => {
  console.log(val);
  demoRef.currentColor = val;
};

const onIconClick = (e: any) => {
  console.log(e);
};

const itemClickHandle = (e: any) => {
  console.log(e);
};
const changeToolbarInputData = () => {
  toolbarInputData.sizeX = 200;
  toolbarInputData.sizeY = 100;
  toolbarInputData.sizeZ = 500;
  toolbarInputData.gridSpacing = 10;
  toolbarInputData.pmlWidth = 10;
  toolbarInputData.envN = 10;
};
</script>

<style lang="scss">
@import url(@/common/style.scss);
.demo {
  // width: 1920px;
  .top {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    .left,
    .center,
    .right {
      width: 33%;
    }
    .title {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .content {
      position: relative;
      .l,
      .r {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0;
        right: 0;
      }
    }
  }
  .bottom {
    padding: 20px;
    .title {
      font-size: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
